<template>
  <div class="upload-container">
    <el-button icon="el-icon-connection" size="mini" type="primary" @click="dialogVisible=true">
      传附件
    </el-button>
    <el-dialog
      :close-on-press-escape="false"
      :close-on-click-modal="false"
      :visible.sync="dialogVisible"
      :append-to-body="true"
      width="500px"
    >

      <el-radio-group v-model="mediaType">
        <el-radio :label="1">图片</el-radio>
        <el-radio :label="2">视频</el-radio>
        <el-radio :label="3">音频</el-radio>
        <el-radio :label="4">录音</el-radio>
        <el-radio :label="5">文件</el-radio>
      </el-radio-group>

      <div style="padding-top: 20px">
        <record
          v-if="mediaType===4"
          ref="record"
          v-model="fileUrl"
          @success="handleSubmit"/>

        <file-upload
          v-else
          v-model="fileUrl"
          :accept="accept"
          :tips="tips"
          style="width: 100%"
          list-type="file"
          @success="handleSubmit"/>
      </div>

    </el-dialog>
  </div>
</template>

<script>

import FileUpload from '@/components/FileUpload'
import Record from '@/components/Recorder'
export default {
  name: 'EditorAttach',
  components: { Record, FileUpload },
  data() {
    return {
      tips: '',
      accept: '',
      mediaType: 0,
      fileUrl: '',
      dialogVisible: false
    }
  },
  watch: {
    mediaType: {
      handler(val) {
        if (val === 1) {
          this.tips = '支持常规图片格式，如png、jpg、gif'
          this.accept = '.png, .jpeg, .gif, .jpg'
        }

        if (val === 2) {
          this.tips = '仅支持mp4格式视频！'
          this.accept = '.mp4'
        }

        if (val === 3) {
          this.tips = '支持mp3、wav、ogg格式音频！'
          this.accept = '.mp3, .wav, .ogg'
        }

        if (val === 5) {
          this.tips = '支持rar/zip/psd/pdf及office格式文件'
          this.accept = '.rar, .zip, .psd, .pdf, .xls, .xlsx, .doc, .docx, .ppt, .pptx'
        }

        // 置空
        this.fileUrl = ''
      }
    }
  },
  mounted() {
    this.mediaType = 1
  },
  methods: {
    handleSubmit() {
      const data = { url: this.fileUrl, mediaType: this.mediaType }
      this.$emit('uploaded', data)
      this.dialogVisible = false
      this.fileUrl = null
    }
  }
}
</script>

<style scoped>

/deep/
.el-upload-dragger{
  width: 460px;
}
</style>
